<template>
    <div class="chart-container">
      <h2 class="chart-title">手机可视化展示</h2>
      <a-button type="primary" @click="handleGoHome" style="margin-right: 16px">主界面</a-button>
      <div class="chart-row">
        <div ref="barChart1" class="chart"></div>
        <div ref="barChart2" class="chart"></div>
      </div>
      <div class="chart-row-mid">
        <!-- <div ref="lineChart" class="chart"></div> -->
        <div ref="pieChart" class="chart"></div>
      </div>
    </div>
  </template>
  
  <script lang="ts">
  import * as echarts from 'echarts';
  import 'echarts-wordcloud';
  export default {
  data() {
    return {
      barChart1Instance: null,
      barChart2Instance: null,
      // lineChartInstance: null,
      pieChartInstance: null
    };
  },
  mounted() {
    this.renderCharts();
  },
  methods: {
    renderCharts() {
      this.barChart1Instance = echarts.init(this.$refs.barChart1);
      this.wordCloudChartInstance = echarts.init(this.$refs.barChart2);
      this.pieChartInstance = echarts.init(this.$refs.pieChart);

      // 模拟数据
      const count = [327, 582, 335, 201, 113, 67, 209];
      const shopFreq = [
        { name: '小米', value: 163 },
        { name: '京东手机', value: 141 },
        { name: '荣耀', value: 77 },
        { name: '炜东电商', value: 57 },
        { name: 'vivo', value: 66 },
        { name: '博恒聚优', value: 45 },
        { name: 'OPPO', value: 41 },
        { name: 'Apple', value: 37 },
        { name: '华为', value: 46 },
        { name: 'iQOO', value: 77 },
        { name: '京东电竞', value: 30 },
        { name: '三星', value: 28 },
        { name: '中国移动手机', value: 25 },
        { name: '京东通信', value: 23 },
        { name: '好机汇', value: 20 },
        { name: '智能手机京喜', value: 19 },
        { name: '优速通达', value: 19 },
        { name: '头号卖家', value: 19 },
        { name: '真我realme', value: 18 },
        { name: '魅族', value: 17 },
        { name: '一加手机', value: 16 },
        { name: '疆界互联', value: 16 },
        { name: '努比亚', value: 14 },
        { name: '京选手机京喜', value: 13 },
        { name: '刚子在线', value: 13 },
        { name: '手机京喜', value: 12 },
        { name: '一加信博通', value: 12 },
        { name: '佳沪电商', value: 11 },
        { name: '京铠玄', value: 11 },
        { name: '中国联通', value: 10 },
        { name: '荣耀探源', value: 10 }
      ];

      const barOptions1 = {
        title: {
          show: true,
          text: '价格区间分布',
          textAlign: 'center',
          left: '50%',
          top: 'bottom'
        },
        xAxis: {
          type: 'category',
          data: ['0-1000', '1000-2000', '2000-3000', '3000-4000', '4000-5000', '5000-6000', '6000以上']
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: count.map(value => ({
            value: value,
            itemStyle: {
              color: 'rgb(51, 102, 204)' // 柱状图颜色
            }
          })),
          type: 'bar'
        }],
        grid: {
          containLabel: true,
          left: '10%',
          right: '10%',
          bottom: '10%',
          top: '10%',
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        }
      };
      this.barChart1Instance.setOption(barOptions1);
      const wordCloudOptions = {
        title: {
          show: true,
          text: '品牌频率词云图',
          textAlign: 'center', 
          left: '50%', // 标题水平居中
          top: 'bottom' 
        },
      series: [{
        type: 'wordCloud',
        shape: 'circle',
        left: 'center',
        top: 'center',
        width: '70%',
        height: '80%',
        right: null,
        bottom: null,
        sizeRange: [12, 60],
        rotationRange: [-90, 90],
        rotationStep: 45,
        gridSize: 8,
        drawOutOfBound: false,
        textStyle: {
          normal: {
            fontFamily: 'sans-serif',
            fontWeight: 'bold',
            color: function () {
              return 'rgb(' + [
                Math.round(Math.random() * 160),
                Math.round(Math.random() * 160),
                Math.round(Math.random() * 160)
              ].join(',') + ')';
            }
          },
          emphasis: {
            shadowBlur: 10,
            shadowColor: '#333'
          }
        },
        data: shopFreq
      }]
    };
    this.wordCloudChartInstance.setOption(wordCloudOptions);
      const pieOptions = {
  title: {
    show: true,
    text: '手机内存',
    textAlign: 'center', 
    left: '50%', 
    top: 'bottom'
  },
  series: [{
    type: 'pie',
    data: [
    { 'value': 594, 'name': '12GB' },
    { 'value': 540, 'name': '8GB' },
    { 'value': 287, 'name': '16GB' },
    { 'value': 136, 'name': '未公布' },
    { 'value': 89, 'name': '4GB及以下' },
    { 'value': 87, 'name': '6GB' },
    { 'value': 36, 'name': '4GB' },
    { 'value': 32, 'name': '24GB' },
    { 'value': 28, 'name': '3GB及以下' },
    { 'value': 5, 'name': '18GB' }
    ]
  }],
  tooltip: {
    trigger: 'item', // 触发方式为项数据触发
    formatter: '{a} <br/>{b}: {c} ({d}%)' // 提示信息格式化
  }
};
this.pieChartInstance.setOption(pieOptions);


    },
    handleGoHome() {
      this.$router.push('/home');
  }
  }
  
};

  </script>
  
  <style>
  .chart-container {
    width: 90vw;
	height: 100vh;
    background-image: url('/assets/image/filebg.jpg'); 
    background-size: cover;
    padding: 20px;
  }
  
  .chart-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
  }

  .chart-row-mid {
  display: flex;
  justify-content: center;
}
  
  .chart {
  width: 48%;
  height: 300px;
  background-color: white;
}
.el-select__placeholder {
  width: 200px;
  margin: 0 auto;
}

</style>

